<style scoped>
.help {
    position: absolute;
    left: 2px;
    bottom: 2px;
}
</style>

<template>
    <TreePanel :is-hor="isHor" />

    <el-button size="small" :icon="QuestionFilled" link class="help" @click="isShow = !isShow"></el-button>
    <el-dialog v-model="isShow" :destroy-on-close="true">
        <el-text>版本号：v1.2</el-text><br/>
        <el-link href="https://gitee.com/prev/cc-inspector.git" target="_blank">仓库地址：https://gitee.com/prev/cc-inspector.git</el-link>

        <el-divider />
        <el-text>布局设置</el-text>
        <el-radio-group  class="width-full" size="small" v-model="isHor" @change="onChanged">
            <el-radio-button label="左右" :value="true" />
            <el-radio-button label="上下" :value="false" />
        </el-radio-group>


        <el-divider />
        <el-text>挂载自定义脚本说明：蓝色（自身及子节点），白色（自身），灰色（子节点）</el-text><br/>

        <el-divider />
        <el-table :data="shortcut">
            <el-table-column prop="key" label="快捷键" />
            <el-table-column prop="desc" label="说明" />
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts">
import TreePanel from '@/TreePanel.vue';
import { onMounted, ref } from 'vue';
import { QuestionFilled } from '@element-plus/icons-vue'

const isShow = ref(false)
const shortcut = [
    {key: '方向', desc: '上下选择节点，左右折叠/展开'},
    {key: 'h', desc: '显示/隐藏节点（跟creator一致）'},
]

onMounted(() => {
    //@ts-ignore
    if (process.env.NODE_ENV === 'development') {
        const list = document.getElementsByTagName('html')
        list[0].className = "dark"
    }
})

const isHor = ref( localStorage.getItem('ccc_devtools_vertical') !== 'true')
function onChanged(value: any) {
    localStorage.setItem('ccc_devtools_vertical', (!value).toString())
    isHor.value = value
}
</script>